import './index.scss'
import { Color } from '@tiptap/extension-color'
import ListItem from '@tiptap/extension-list-item'
import TextStyle from '@tiptap/extension-text-style'
import { Editor, EditorProvider, useCurrentEditor } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import Image from '@tiptap/extension-image'
import {
  ArrowLeftOutlined,
  ArrowRightOutlined,
  BoldOutlined,
  ClearOutlined,
  CodeOutlined,
  ItalicOutlined,
  OrderedListOutlined,
  StrikethroughOutlined,
  UnorderedListOutlined,
} from '@ant-design/icons'
import { debounce } from 'lodash'
import PIcon from '../pIcon'


export interface IRichTextEditorProps {
  content?: string
  onChange?: (content: Editor) => void
  state: 'QUESTYPE' | 'WRITE' | 'READ' | 'PREVIEW' | 'TODO' | ''
}
export default function RichTextEditor(props: IRichTextEditorProps) {
  const { content = '', onChange = () => {}, state = 'QUESTYPE' } = props

  const extensions = [
    Color.configure({ types: [TextStyle.name, ListItem.name] }),
    TextStyle,
    Image.configure({
      inline: true,
      allowBase64: true,
    }),
    StarterKit.configure({
      bulletList: {
        keepMarks: true,
        keepAttributes: false,
      },
      orderedList: {
        keepMarks: true,
        keepAttributes: false,
      },
    }),
  ]

  const MenuBar = () => {
    const { editor } = useCurrentEditor()

    if (!editor || ['READ'].includes(state)) {
      return null
    }
    

    return (
      <div className="menu-bar">
        <span
          onClick={() => editor.chain().focus().undo().run()}
          className={
            !editor.can().chain().focus().undo().run() ? 'do-disabled' : ''
          }>
          <ArrowLeftOutlined />
        </span>
        <span
          onClick={() => editor.chain().focus().redo().run()}
          className={
            !editor.can().chain().focus().redo().run() ? 'do-disabled' : ''
          }>
          <ArrowRightOutlined />
        </span>
        <span onClick={() => editor.chain().focus().toggleBold().run()}>
          <BoldOutlined />
        </span>
        <span onClick={() => editor.chain().focus().toggleItalic().run()}>
          <ItalicOutlined />
        </span>
        <span onClick={() => editor.chain().focus().toggleStrike().run()}>
          <StrikethroughOutlined />
        </span>
        <span onClick={() => editor.chain().focus().toggleCode().run()}>
          <CodeOutlined />
        </span>

        <span onClick={() => editor.chain().focus().toggleBlockquote().run()}>
          <PIcon name="icon-paragraph"></PIcon>
        </span>
        <span onClick={() => editor.chain().focus().setHardBreak().run()}>
          <PIcon name="icon-link-break"></PIcon>
        </span>
        <span
          onClick={() =>
            editor.chain().focus().toggleHeading({ level: 1 }).run()
          }>
          <PIcon name="icon-h-1"></PIcon>
        </span>
        <span
          onClick={() =>
            editor.chain().focus().toggleHeading({ level: 2 }).run()
          }>
          <PIcon name="icon-h-2"></PIcon>
        </span>
        <span
          onClick={() =>
            editor.chain().focus().toggleHeading({ level: 3 }).run()
          }>
          <PIcon name="icon-h-3"></PIcon>
        </span>
        {/* 
        <span
          onClick={() =>
            editor.chain().focus().toggleHeading({ level: 4 }).run()
          }
          className={
            editor.isActive('heading', { level: 4 }) ? 'is-active' : ''
          }>
          H4
        </span>
        <span
          onClick={() =>
            editor.chain().focus().toggleHeading({ level: 5 }).run()
          }
          className={
            editor.isActive('heading', { level: 5 }) ? 'is-active' : ''
          }>
          H5
        </span>
        <span
          onClick={() =>
            editor.chain().focus().toggleHeading({ level: 6 }).run()
          }
          className={
            editor.isActive('heading', { level: 6 }) ? 'is-active' : ''
          }>
          H6
        </span> */}
        <span onClick={() => editor.chain().focus().toggleBulletList().run()}>
          <UnorderedListOutlined />
        </span>
        <span onClick={() => editor.chain().focus().toggleOrderedList().run()}>
          <OrderedListOutlined />
        </span>
        <span onClick={() => editor.chain().focus().toggleCodeBlock().run()}>
          <PIcon name="icon-code"></PIcon>
        </span>

        {/* <span
          onClick={() => editor.chain().focus().toggleBlockquote().run()}
          className={editor.isActive('blockquote') ? 'is-active' : ''}>
          Blockquote
        </span>
        <span onClick={() => editor.chain().focus().setHorizontalRule().run()}>
          Horizontal rule
        </span>
        <span onClick={() => editor.chain().focus().setHardBreak().run()}>
          Hard break
        </span> */}
        {/* 
        <span onClick={() => }>
          <ClearOutlined />
        </span> */}

        <span
          onClick={() => {
            editor.chain().focus().unsetAllMarks().run()
            editor.chain().focus().clearNodes().run()
          }}>
          <ClearOutlined />
        </span>
        {/* <span
          onClick={() => editor.chain().focus().setColor('#958DF1').run()}
          className={
            editor.isActive('textStyle', { color: '#958DF1' })
              ? 'is-active'
              : ''
          }>
          Purple
        </span> */}
      </div>
    )
  }

  const onUpdate = debounce((editor: Editor) => {
    if (onChange) {
      onChange(editor)
    }
  }, 100)

  
  return (
    <div className={`${['READ','PREVIEW'].includes(state) ? 'editor disabled_editor' : 'editor'}`}>
      <EditorProvider
        editable={['WRITE'].includes(state)}
        slotBefore={<MenuBar />}
        extensions={extensions}
        content={content}
        onUpdate={(props) => {
          if (['WRITE'].includes(state)) onUpdate(props.editor)
        }}></EditorProvider>
    </div>
  )
}
